<!-- eslint-disable vue/multi-word-component-names -->
<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/rear-end/index' }"
				>首页</el-breadcrumb-item
			>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card>
			<el-row>
				<el-col>
					<el-button type="primary" @click="showAddDialog" :disabled="addbtn"
						>添加店铺</el-button
					>
				</el-col>
			</el-row>
			<!-- 表格 -->
			<el-table :data="shopData" style="width: 100%">
				<el-table-column prop="shopName" label="店铺名称" width="180">
				</el-table-column>
				<el-table-column prop="materialFlow" label="物流评分" width="180">
				</el-table-column>
				<el-table-column prop="seller" label="卖家评分"> </el-table-column>
				<el-table-column prop="treasure" label="宝贝描述评分">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button
							type="primary"
							@click="showEditDialog(scope.row)"
							icon="el-icon-edit"
							>编辑</el-button
						>
						<el-button
							type="danger"
							@click="delParams(scope.row)"
							icon="el-icon-delete"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 添加分类对话框 -->
		<el-dialog
			title="添加商店"
			:visible.sync="addDialogVisible"
			width="50%"
			@closed="clearadd"
		>
			<!-- 添加店铺的表单 -->
			<el-form
				:model="addShopForm"
				:rules="shopFormRules"
				ref="addFormRef"
				label-width="100px"
			>
				<el-form-item label="店铺名称：" prop="shopName">
					<el-input v-model="addShopForm.shopName"></el-input>
				</el-form-item>
				<el-form-item label="店铺照片：">
					<UploadVue ref="addImgRef" @img="img" :limit="1"></UploadVue>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearadd">取 消</el-button>
				<el-button type="primary" @click="add">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			title="修改商品"
			:visible.sync="updateDialogVisible"
			width="50%"
			@closed="clearupdate"
		>
			<el-form
				:model="updateShopForm"
				:rules="shopFormRules"
				ref="updateFormRef"
				label-width="100px"
			>
				<el-form-item label="店铺名称：" prop="shopName">
					<el-input v-model="updateShopForm.shopName"></el-input>
				</el-form-item>
				<el-form-item label="店铺照片：">
					<UploadVue
						ref="addImgRef"
						@updatafileList="updatafileList"
						@img="img1"
						@check="updateimg=true"
						:limit="1"
						:fileList="fileList"
					></UploadVue>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="clearupdate">取 消</el-button>
				<el-button type="primary" @click="update">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import UploadVue from '@/components/rear-end/goods/Upload.vue'
	export default {
		components: { UploadVue },
		data() {
			return {
				addDialogVisible: false,
				updateDialogVisible: false,
				addbtn: false,
				shopData: [],
				addShopForm: {
					shopName: '',
					shopImg: '',
				},
				updateShopForm: {
					shopId: '',
					shopName: '',
					shopImg: '',
				},
				updateimg: false,
				shopFormRules: {
					shopName: [
						{ required: true, message: '请输入店铺名称', trigger: 'blur' },
					],
				},
				fileList: [],
			}
		},
		props: ['admin'],
		created() {
			this.getShop()
		},
		methods: {
			//删除店铺操作
			delParams(row) {
				this.$confirm('确认删除该店铺吗？')
					.then(async () => {
						let res = await this.$api.sort.delShop({ shopId: row.shopId })
						if (res.data.code == 1) {
							this.$message.success('删除成功')
							this.getShop()
						} else {
							this.$message.error('删除失败')
						}
					})
					.catch(() => {
						this.$message.info('取消该操作！')
					})
			},
			//打开修改对话框
			showEditDialog(row) {
				this.updateShopForm.shopId = row.shopId
				this.updateShopForm.shopName = row.shopName
				this.updateShopForm.shopImg = row.shopImg
				this.updateimg=false
				if (row.shopImg !== '') {
					this.$api.rear_end.download(row.shopImg).then((res) => {
						let url1 = window.URL.createObjectURL(
							new Blob([res.data], { type: 'image/jpeg' })
						)
						const t = { name: row.shopImg, url: url1 }
						this.fileList.push(t)
					})
				}
				this.updateDialogVisible = true
			},
			//打开添加对话框
			showAddDialog() {
				if (this.admin.type === 3) {
					this.$message.info('普通管理员用户没有该权限！')
					return
				}
				this.addDialogVisible = true
			},
			//修改店铺
			update() {
				this.$refs.updateFormRef.validate(async (valid) => {
					if (!valid) return
					if (this.updateimg) {
						await this.$refs.addImgRef.upload()
					}
					let res = await this.$api.sort.editShop(this.updateShopForm)
					if (res.data.code == 1) {
						this.$message.success('修改商店成功')
					} else {
						this.$message.error('修改商店失败')
					}
					this.updateDialogVisible = false
					this.getShop()
					this.$forceUpdate()
				})
			},
			add() {
				this.$refs.addFormRef.validate(async (valid) => {
					if (!valid) return
					await this.$refs.addImgRef.upload()
					let res =await this.$api.sort.addShop(this.addShopForm)
					if (res.data.code == 1) {
						this.$message.success('添加商店成功')
					} else {
						this.$message.error('添加商店失败')
					}
					this.addDialogVisible = false
					this.getShop()
					this.$forceUpdate()
				})
			},
			clearadd() {
				this.$nextTick(() => {
					this.addShopForm.shopName = ''
					this.addShopForm.shopImg = ''
					this.$refs.addImgRef.handleRemove()
				})
			},
			updatafileList(val) {
				this.fileList.splice(val, 1)
			},
			clearupdate() {
				this.$nextTick(() => {
					this.updateShopForm.shopId = ''
					this.updateShopForm.shopName = ''
					this.updateShopForm.shopImg = ''
					this.$refs.addImgRef.handleRemove1()
					this.fileList = []
					this.updateimg=false
				})
				this.updateDialogVisible = false
			},
			img(val) {
				this.addShopForm.shopImg = val
			},
			img1(val) {
				this.updateShopForm.shopImg = val
			},
			//查询商店信息
			async getShop() {
				const res = await this.$api.sort.shop()
				if (res.data.code === 1) {
					this.shopData = res.data.data
					if (this.shopData.length > 0) {
						this.addbtn = true
					}
				}
			},
		},
	}
</script>

<style scoped lang="less">
</style>